<template>
	<view>
		<view class="Dlocation">
			<view class="required-form-item">*</view>
			<view>病害位置</view>
		</view>
		<!-- 站点类型为区间 -->
		<view class="formFill">
			<u-form labelPosition="left" :model="addInfo" ref="form1" v-if="addInfo.lineSiteSectionType == 'qj'" :labelStyle="{color:'#303133'}">
				<u-form-item label="环号" prop="" borderBottom ref="item1" labelWidth='100' >
					<view class="" style="display: flex;align-items: center;">
						<u--input type="number" class='change-input1' v-model="addInfo.startNumber"
							@blur="blurs($event)" @change="changeVal($event, 3)"></u--input>~
						<u--input type="number" class='change-input2' v-model="addInfo.endNumber"
							@blur="blurs($event)"
							@input="addInfo.endNumber = addInfo.endNumber.replace(/^(0+)|[^\d]+/g,'')"></u--input>
					</view>
				</u-form-item>
				<u-form-item label="开始里程" prop="" borderBottom ref="item1" labelWidth='100'>
					<view style="display: flex;align-items: center;">
						<view @click="chooseMileage" style="width: 320rpx;margin-right: 10rpx;">
							<u--input :disabled="true" class='change-input' inputAlign='center'
								v-model="value"></u--input>
						</view>
						<view class="" style="display: flex;align-items: center;">
							<u--input type="number" class='change-input1' v-model="addInfo.startMileageFront"
								maxlength="4" @change="changeVal($event, 1)" @input="inputVal($event, 1)"></u--input>+
							<u--input type="number" class='change-input2' v-model="addInfo.startMileageAfter"
								maxlength="4" @change="changeVal($event, 2)" @input="inputVal($event, 2)"></u--input>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="结束里程" prop="" borderBottom ref="item1" labelWidth='100'>
					<view style="display: flex;align-items: center;">
						<view style="width: 320rpx;margin-right: 10rpx;">
							<u--input :disabled="true" class='change-input' inputAlign='center'
								v-model="value"></u--input>
						</view>
						<view class="" style="display: flex;align-items: center;">
							<u--input type="number" class='change-input1' v-model="addInfo.endMileageFront"
								maxlength="4">
							</u--input>+
							<u--input type="number" class='change-input2' v-model="addInfo.endMileageAfter"
								maxlength="4">
							</u--input>
						</view>
					</view>
				</u-form-item>

				<u-form-item label="其他" prop="others" borderBottom ref="item1" labelWidth='100'>
					<u--input class='change-input3' v-model="addInfo.others" style="width: 95%;"></u--input>
				</u-form-item>
				<u-form-item label="时针位置" prop="clockwisePosition" ref="item1" labelWidth='100' @click="changtime()">
					<u--input class='change-input3' disabled disabledColor="#ffffff" style="width: 95%;"
						v-model="addInfo.clockwisePosition" suffixIcon="arrow-down">
					</u--input>
				</u-form-item>
			</u-form>
			<!-- 车站 -->
			<view class="add-station-box" style="margin-top: 40rpx;" v-if="addInfo.lineSiteSectionType == 'cz'">
				<view class="flex-chezhan" @click="chooseEquip()">
					<view class="font-chezhan">车站位置</view>
					<view>
						<text style="font-size: 30rpx;padding-right: 16rpx;">{{addInfo.stationLocation}}</text>
						<u-icon class='icon-disease' name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="flex-chezhan">
					<view class="font-chezhan">其他</view>
					<view style="width: 70%;">
						<u--input class='change-input3' border="surround" v-model="addInfo.others"></u--input>
					</view>
				</view>
			</view>
			<!-- 其他站点 -->
			<view style="margin-top: 40rpx;"
				v-if="addInfo.lineSiteSectionType !== 'qj' && addInfo.lineSiteSectionType !== 'cz'">
				<view class="flex-chezhan">
					<view class="font-chezhan">位置</view>
					<view style="width: 70%;">
						<u--input class='change-input3' border="surround" v-model="addInfo.others">
						</u--input>
					</view>
				</view>
			</view>
		</view>

		<view class="content-colot"></view>
		<view class="d-remarks">
			<view class="d-text">
				<view class="txt-star">病害现状</view>
				<view class="">
					<u-button size="mini" color="#2f80ed" @click="diseaseJs">常用</u-button>
				</view>
			</view>
			<view class="form-item form-item-description">
				<u-textarea v-model="addInfo.diseaseStatus" placeholder="请输入内容"
					@confirm="getDefineValue" confirmType='done'>
				</u-textarea>
				<record class="form-item-icon form-item-icon-voice" @setText="fnDescription"></record>
				<image v-if="addInfo.diseaseStatus" mode="scaleToFill" class="form-item-icon form-item-icon-clear"
					src="/static/image/login/del1.png" @click="clearTxt"></image>
			</view>
		</view>
		<view class="l-dsGrade">
			<view class="l-dsGrade-text">病害等级</view>
			<picker mode="multiSelector" :range="levelColumns" range-key="diseaseGrade"
				@columnchange="fnMultiColumnChange" @change="fnMultiPickerChange" :value="values">
				<!-- 可编辑等级 -->
				<view class="l-leave" @click="fnChooseLevel" v-if="addInfo.diseaseStatus">
					{{ addInfo.diseaseGrade || '' }}{{ addInfo.diseaseNo || '' }}
					<u-icon class='icon-disease' name="arrow-right"></u-icon>
				</view>
			</picker>
		</view>
		<view class="content-colot"></view>
		<view class="repair-dispatch-box">
			<view class="item-box title-item">
				<text class="txt" style="min-width: 100rpx;">工单号</text>
				<view style="padding-right: 50rpx;">
					<u--input type="number"  placeholder="请输入内容" v-model="addInfo.orderNo" border="none" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="item-box" @click="showTeam = true">
				<text class="txt team">施工班组</text>
				<view>
					<text>{{ addInfo.team }}</text>
					<u-icon name="arrow-right" color="#e6e6e6" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="content-colot"></view>
		<!--车站位置选择器 -->
		<u-popup :show="isShowStation">
			<view class="item-sel-box">
				<text style="padding-left: 50rpx" @click="cancelEquip()">取消</text>
				<text>位置选择</text>
				<text style="padding-right: 50rpx;color: #169bd5;" @click="sureEquip()">确定</text>
			</view>
			<u-grid :border="false" col="3" style="height: 400rpx; overflow-y: auto;">
				<u-grid-item v-for="(i,idx) in stationList" :key="i.id">
					<view class="item-equip" @click="clickItemBox(i,idx, 1)"
						:class="currentStationItemIndex === idx ? 'activeClass' : ''">{{i.name}}</view>
				</u-grid-item>
			</u-grid>
		</u-popup>
		<!-- 里程类别选择器 -->
		<view>
			<u-picker :show="isShowMileage" title="里程类别" :columns="mileageList" @confirm="sureMileage"
				@cancel="isShowMileage = false"></u-picker>
		</view>
		<u-picker :show="showTime" :columns="[timeList]" title="时针位置" @cancel="cancel" @confirm="confirm"></u-picker>
		<u-picker :show="showTeam" :columns="[teamColumn]" keyName="name" @confirm="confirmTeam" @cancel="showTeam = false"></u-picker>
	</view>
</template>

<script>
	import mixins from "@/utils/mixins.js"
	import { diseaseGradeList, getDiseaseContent, lineSectionGet, getConstructionTeam } from '@/api/engineeringMaintenance/engineeringMaintenance.js'
	export default {
		mixins: [mixins],
		inject:['grandFatherObj'],
		computed:{
			addInfo(){
				return this.grandFatherObj()
			}
		},
		props:{
			value: {
				type: String,
				default: ''
			}
		},
		watch:{
			value: {
				handler(newVal) {
					this.$emit('input', newVal)
					if (newVal === 'SK' && newVal !== 'XK') {
						this.mileageList = [
							['SK', 'MK']
						]
					} else if (newVal === 'XK' && newVal !== 'SK') {
						this.mileageList = [
							['XK', 'MK']
						]
					}
					let name = this.addInfo.lineSiteSectionName.substring(this.addInfo.lineSiteSectionName.length - 2, this.addInfo.lineSiteSectionName.length)
					console.log(name, '===');
					if (newVal === 'MK' && name === "上行") {
						this.mileageList = [
							['SK', 'MK']
						]
					} else if (newVal === 'MK' && name === "下行") {
						this.mileageList = [
							['XK', 'MK']
						]
					}
				},
				// immediate: true,
				deep: true		
			},
			addInfo: {
				handler(nValue) {
					console.log(nValue, '监听表单');
					this.$eventBus.$emit('sendGrandsonData', nValue);
				},
				// immediate: true,
				deep: true	
			}
		},
		mounted() {
		},
		data() {
			return {
				currentStationItemIndex: -1,
				stationList:[],
				levelColumns: [ [], [] ],
				values: [0, 0],
				isShowStation:false,
				isShowMileage:false,
				mileageList:[],
				showTime:false,
				timeList:['1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点'],
				showTeam:false,
				teamColumn:[],
				isClickEnter: false, //是否自定义现状
				// addInfo: {},
			}
		},
		methods:{
			getTeamList() {
				getConstructionTeam({
					id: uni.getStorageSync('isOwner'),
				}).then(res => {
					this.teamColumn = res.result
				})
			},
			chooseMileage() {
				
			},
			//求两个数之间的数
			getNumbersInRange(num1, num2) {
			  const result = [];
			  const step = (num1 > num2) ? -1 : 1;
			
			  for (let i = num1; i !== num2 + step; i += step) {
			    result.push(i);
			  }
			
			  return result;
			},
			async blurs(e) {
				if (this.addInfo.startNumber && this.addInfo.endNumber) {
					let response = await lineSectionGet({
						id: this.addInfo.lineSiteSectionId 
					})
					if (response.result) {
						console.log(response, '响应--');
						let resultObj = response.result
						//算出录入的开始环号的对应里程信息  对应里程=开始里程+（录入环号-开始环号）*（开始里程-结束里程）/（开始环号-结束环号）
						//开始里程
						let startMileageTest = (resultObj.startMileageUp * 1000) + resultObj.startMileageBelow
						//结束里程
						let endMileageTest = (resultObj.endMileageUp * 1000) + resultObj.endMileageBelow
						//需要将这个结果四舍五入保留整数 然后再除以1000 分两段展示 sk+千位以上 + 千位以下 
						let TestStart = startMileageTest + ((this.addInfo.startNumber) - resultObj.startLoop) * (
							startMileageTest - endMileageTest) / (resultObj.startLoop - resultObj.endLoop)
						let TestEnd = startMileageTest + ((this.addInfo.endNumber) - resultObj.startLoop) * (
							startMileageTest - endMileageTest) / (resultObj.startLoop - resultObj.endLoop)
						console.log(startMileageTest, endMileageTest, TestStart, TestEnd, '开始，结束，开始对应，结束对应');
						/**
						 * 需要计算的情况(需要考虑两种情况 一种是正向巡查,eg:1--->4, 另一种是反向巡查，eg:4--->1)
						 * 正向情况（startLoop < endLoop）
						 * 1.输入的环号1和环号2与返回的值相等并且是返回值之间数的时候
						 * 2.环号1相等或者大于startLoop只需要计算开始里程
						 * 3.环号2相等或者小于endLoop只需要计算结束里程
						 * 反向情况 (startLoop > endLoop)
						 * 1.输入环号1 小于或者等于 startLoop 只需要计算开始里程
						 * 2.输入环号2大于或者等于endLoop只需要计算结束里程
						 */
						this.nextTick('startMileageFront', '')
						this.nextTick('startMileageAfter', '')
						this.nextTick('endMileageFront', '')
						this.nextTick('endMileageAfter', '')
						if (resultObj.startLoop < resultObj.endLoop) {
							if (this.getNumbersInRange(resultObj.startLoop, resultObj.endLoop).includes(Number(this.addInfo.startNumber)) && this.addInfo.startNumber >= resultObj.startLoop && TestStart > 1000) {
								const startUp = Number(Math.floor(Math.round(TestStart) / 1000))
								const startEnd = Math.round(Number(TestStart % 1000))
			
								this.nextTick('startMileageFront', startUp)
								this.nextTick('startMileageAfter', startEnd)
								console.log('只需要计算开始里程', startUp, startEnd);
							}
							if (this.getNumbersInRange(resultObj.startLoop, resultObj.endLoop).includes(Number(this.addInfo.endNumber)) &&  this.addInfo.endNumber <= resultObj.endLoop &&  TestEnd > 1000) {
								const afterUp = Number(Math.floor(Math.round(TestEnd ) / 1000))
								const afterEnd = Math.round(Number(TestEnd % 1000))
								this.nextTick('endMileageFront', afterUp)
								this.nextTick('endMileageAfter', afterEnd)
								console.log('只需要计算结束里程', afterUp, afterEnd);
							}
						} else if (resultObj.startLoop > resultObj.endLoop) {
							if (this.getNumbersInRange(resultObj.startLoop, resultObj.endLoop).includes(Number(this.addInfo.startNumber)) && this.addInfo.startNumber <= resultObj.startLoop && TestStart > 1000) {
								const startUp = Number(Math.floor(Math.round(TestStart ) / 1000))
								const startEnd = Math.round(Number(TestStart % 1000))
								this.nextTick('startMileageFront', startUp)
								this.nextTick('startMileageAfter', startEnd)
								console.log('反向情况只需要计算开始里程', startUp, startEnd);
							}
							if (this.getNumbersInRange(resultObj.startLoop, resultObj.endLoop).includes(Number(this.addInfo.endNumber)) &&  this.addInfo.endNumber >= resultObj.endLoop &&  TestEnd > 1000) {
								const afterUp =Number(Math.floor(Math.round(TestEnd ) / 1000))
								const afterEnd = Math.round(Number(TestEnd % 1000))
								this.nextTick('endMileageFront', afterUp)
								this.nextTick('endMileageAfter', afterEnd)
								console.log('反向情况只需要计算结束里程', afterUp, afterEnd);
							}
						}
						this.$forceUpdate()
					}
				}
			
			},
			nextTick(key, row) {
				this.$nextTick(() => {
					if (typeof row != 'string') {
						row = String(row)
					}
					if (!!this.addInfo[key]) {
						this.addInfo[key] = row
					} else {
						this.$set(this.addInfo, key, row)
					}
				})
			},
			inputVal(e, num) {
				if (num === 1) {
					this.$nextTick(() => {
						if (e != 0) {
							this.addInfo.startMileageFront = e.replace(/^(0+)|[^\d]+/g, '')
						}
					})
				}
				if (num === 2) {
					this.$nextTick(() => {
						if (e != 0) {
							this.addInfo.startMileageAfter = e.replace(/^(0+)|[^\d]+/g, '')
						}
					})
				}
				if (num === 3) {
					this.$nextTick(() => {
						if (e != 0) {
							this.addInfo.startNumber = e.replace(/^(0+)|[^\d]+/g, '')
						}
					})
				}
			
			},
			changeVal(e, num) {
				if (num === 1) {
					this.addInfo.endMileageFront = e.replace(/^(0+)|[^\d]+/g, '0')
				}
				if (num === 2) {
					this.addInfo.endMileageAfter = e.replace(/^(0+)|[^\d]+/g, '0')
				}
				if (num === 3) {
					this.addInfo.endNumber = e.replace(/^(0+)|[^\d]+/g, '0')
				}
			},
			chooseEquip(){
				this.isShowStation = true
			},
			sureEquip() {
				let obj = this.stationList.find(it => it.selectedIdx === this
					.currentStationItemIndex)
				if (!obj) return uni.showToast({
					title: '请先选择！',
					icon: 'none'
				})
				this.isShowStation = false
				this.$set(this.addInfo,'stationLocation',obj.name)
			},
			cancelEquip() {
				this.isShowStation = false
				this.$set(this.addInfo,'stationLocation',undefined)
				this.currentStationItemIndex = -1

			},
			confirmTeam(val) {
				this.$set(this.addInfo,'team',val.value[0].name)
				this.showTeam = false
			},
			//选择病害现状
			diseaseJs() {
				uni.navigateTo({
					url: `/subpackage-enginner/pages/engineeringMaintenance/on_site_inspection/components/dPresent?lineSiteSectionType=${this.addInfo.lineSiteSectionType}`,
					events: {
						setData: (data) => {
							this.$set(this.addInfo, 'diseaseStatus', data.data
								.diseaseStatus)
							this.$set(this.addInfo, 'diseaseGrade', data.data
								.diseaseGrade)
							this.$set(this.addInfo, 'diseaseGradeName', data.data
								.diseaseGrade)
							this.$set(this.addInfo, 'diseaseGradeId', data.data
								.diseaseGradeId)
							this.$set(this.addInfo, 'diseaseStandardLibraryId', data.data
								.id)
							this.$set(this.addInfo, 'diseaseNo', data.data.diseaseNo)
							this.$set(this.addInfo, 'rankClass', data.data.diseaseCode)
							// console.log(data, '现状222222');
						}
					},
					success: res => {
						res.eventChannel.emit('getList', {
							data: 'data'
						})
					}
				})
			},
			//时针位置取消选择
			cancel() {
				this.showTime = false
			},
			// 时针位置选择确定
			confirm(e) {
				console.log(e, '时针位置')
				this.addInfo.clockwisePosition = e.value[0]
				this.showTime = false
			},
			// 打开时针位置选择器
			changtime() {			
				if (this.ownerCode !== 'hg') {
					this.showTime = true
				} else {
					uni.navigateTo({
						url: '/subpackage-enginner/pages/engineeringMaintenance/common/selectClockwisePosition',
						//用于监听selectPeople页面发送过来的数据
						events: {
							setTimeEvent: (data) => {
								console.log("点击时针位置", data.data)
								this.testTimeArr = data.data
								this.$set(this.addInfo, 'clockwisePosition', data.data
									.map(r => r.name).join('、'))
								console.log(this.addInfo.clockwisePosition);
							}
						},
						success: res => {
							console.log(this.compoType);
							console.log(this.addInfo, '---');
								let list = this.testTimeArr || []
								res.eventChannel.emit('getTimePosition', {
									data: list.map(item => item.id)
								})			
						},
					});
				}
			
			},
			/**
			 * @param {Object} i   当前对象
			 * @param {Object} idx 下标
			 * @param {Object} num 类型 1车站 2影响设备位置
			 */
			clickItemBox(i, idx, num) {
				if (num === 1) {
					this.currentStationItemIndex = idx
				} else {
					this.currentItemIndex = idx
				}
				this.$set(i, 'selectedIdx', idx)
			},
			getDefineValue(){
				console.log(this.addInfo,'bbbbDGA');
				this.addInfo.diseaseGrade = undefined
				this.addInfo.diseaseNo = undefined
				this.addInfo.diseaseStandardLibraryId = undefined
			},
			//录音事件
			fnDescription(text) {
				let index = this.cursor || 0
				let str = this.addInfo.diseaseStatus || ""
				this.cursor += text.length
				text = str.slice(0, index) + text + str.slice(index);
				this.$set(this.addInfo, "diseaseStatus", text)
				
			},
			//录音框清除事件
			clearTxt(val) {
				console.log(val);
				// this.addInfo.diseaseStatus = ''
				this.$set(this.addInfo,'diseaseStatus','')
				this.isClickEnter = false
				this.addInfo.diseaseGrade = undefined
				this.addInfo.diseaseNo = undefined
				this.addInfo.diseaseStandardLibraryId = undefined
			},
			//选择病害等级
			fnChooseLevel() {
				this.getLevelOptions(uni.getStorageSync('isOwner'))
			},
			//获取病害等级选择项
			async getLevelOptions(projectId) {
				let resq = {
					currPage: 1,
					pageSize: 9999,
					params: {
						projectId
					}
				}
				let result1 = await diseaseGradeList(resq)
				let { list } = result1.result || []
				this.$set(this.levelColumns, 0, list)
				if (list.length > 0) {
					let result2 = await getDiseaseContent({
						diseaseGradeId: this.selectedFirstId ? this.selectedFirstId : list[
							0].id,
						code: this.addInfo.lineSiteSectionType
					})
					// console.log(result2.result, '二级');
					//展示等级+编号
					this.levelColumns[1] = result2.result.map(it => ({
						...it,
						diseaseGrade: it.diseaseNo || '',
						diseaseNo: it.diseaseGrade || ''
					}))
					// console.log(this.levelColumns[1], '=======');
				}else{
					uni.showToast({
						title:'未配置病害等级',
						icon:'none',
						mask:true
					})
				}
				this.$forceUpdate()
			},
			fnMultiColumnChange(e) {
				console.log(e);
				if (!e.detail.column) {
					let idx = e.detail.value
					this.values = [e.detail.value, 0] // 区列表下标归零
					// console.log(this.values, 'values')
					getDiseaseContent({
						diseaseGradeId: this.levelColumns[0][idx].id,
						code: this.addInfo.lineSiteSectionType
					}).then(res => {
						this.levelColumns[1] = res.result.map(it => ({
							...it,
							diseaseGrade: it.diseaseNo,
							diseaseNo: it.diseaseGrade
						})) // 设置多级联动区列表的值
						// console.log(this.levelColumns[1], '========滑动事件');
						this.$forceUpdate()
					})
				}
			},
			//picker确定后事件
			fnMultiPickerChange(e) {
				let _taskIdx = e.detail.value[0]
				//通过这个id查询第二列数据
				this.selectedFirstId = this.levelColumns[0][_taskIdx].id
				let _faceIdx = e.detail.value[1]
				let selectData = [this.levelColumns[0][_taskIdx], this.levelColumns[1][_faceIdx]]
				if (this.levelColumns[1][_faceIdx]) {
					this.$set(this.addInfo, 'diseaseGrade', this.levelColumns[1][_faceIdx]
						.diseaseNo)
					this.$set(this.addInfo, 'diseaseNo', this.levelColumns[1][_faceIdx]
						.diseaseGrade)
					this.$set(this.addInfo, 'diseaseStandardLibraryId', this.levelColumns[1][
						_faceIdx
					].id)
					this.$set(this.addInfo, 'diseaseGradeId', this.levelColumns[0][_taskIdx]
						.id)
					this.$set(this.addInfo, 'diseaseGradeName', this.levelColumns[0][_taskIdx]
						.diseaseGrade)
					this.$set(this.addInfo, 'rankClass', this.levelColumns[0][_taskIdx].code)
				} else {
					this.$set(this.addInfo, 'diseaseGrade', this.levelColumns[0][_taskIdx]
						.diseaseGrade)
					// this.$set(this.addInfo, 'diseaseStatus', this.levelColumns[0][_taskIdx].diseaseGrade)
					this.$set(this.addInfo, 'diseaseNo', '')
					this.$set(this.addInfo, 'diseaseGradeId', this.levelColumns[0][_taskIdx]
						.id)
					this.$set(this.addInfo, 'diseaseGradeName', this.levelColumns[0][_taskIdx]
						.diseaseGrade)
					this.$set(this.addInfo, 'diseaseStandardLibraryId', 0)
				}
				// console.log(this.addInfo.diseaseStandardLibraryId, '----')
				this.$forceUpdate()
				this.isClickEnter = false
			},
			sureMileage() {
				
			}
		},
		created() {
			this.ownerCode = uni.getStorageSync('ownerCode')
			this.stationList = this.$store.getters.dictMap['station_location']
			// #ifdef MP-WEIXIN
			this.getLevelOptions(uni.getStorageSync('isOwner'))
			// #endif
			this.getTeamList()
		}
	}
</script>

<style lang="scss" scoped>
	.Dlocation {
		display: flex;

		width: 90%;
		height: 100rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		line-height: 100rpx;
		margin-left: 40rpx;
		border-bottom: 2rpx solid #e8e8ef;

		.required-form-item {
			color: red;
			line-height: 112rpx;

		}

	}

	.formFill {
		margin-left: 74rpx;
		margin-right: 66rpx;

		.change-input {
			width: 50rpx !important;
			height: 48rpx;
			margin-right: 20rpx;
			padding: 0;
			background: #F5F7FA;
			padding: 2rpx 8rpx !important;
		}

		.change-input1 {
			margin-right: 20rpx;
			padding: 2rpx 8rpx !important;
		}

		.change-input2 {
			margin-left: 20rpx;
			padding: 2rpx 8rpx !important;
		}

		.change-input3 {
			padding: 2rpx 8rpx !important;
		}
		// ::v-deep .u-form-item__body__left__content__label {
		// 	color: red !important;
		// }

	}

	.content-colot {
		width: 100%;
		height: 40rpx;
		background: #F5F7FA;
	}

	.d-remarks {
		width: 90%;
		margin-left: 40rpx;

		.d-text {
			height: 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			line-height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between
		}
	}

	.l-dsGrade {
		width: 90%;
		height: 120rpx;
		display: flex;
		margin-left: 30rpx;
		justify-content: space-between;
		align-items: center;
		// border-top:1rpx solid  #e5e5e5;
		// margin-top: 20rpx;

		.l-dsGrade-text {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #586981;
			line-height: 120rpx;
		}

		.l-dsGrade-text:before {
			content: '*';
			color: red;
		}

		.l-leave {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #4F5E72;
			line-height: 120rpx;
		}
	}
	.item-sel-box {
		    display: flex;
		    width: 100%;
		    justify-content: space-between;
		    align-items: center;
		    padding-top: 40rpx;
		    padding-bottom: 20rpx;
	}
	.form-item {
		width: 100%;
		position: relative;
		margin-bottom: 40rpx;
	}
	
	.form-item-description {
		.form-item-icon {
			width: 48rpx;
			height: 48rpx;
		}
	
		.form-item-icon-voice {
			position: absolute;
			top: 10rpx;
			right: 16rpx;
			z-index: 3;
		}
	
		.form-item-icon-clear {
			position: absolute;
			right: 16rpx;
			bottom: 10rpx;
			z-index: 2;
		}
	}
	.repair-dispatch-box {
		.item-box {

			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: white;
			padding: 28rpx 40rpx;
			// margin: 20rpx 0;
			position: relative;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #586981;

			.txt.team::before {
				content: "*";
				color: red;
			}
		}
	}
	.flex-chezhan {
		display: flex;
		justify-content:space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}
	.font-chezhan {
		font-size: 30rpx;
	}
	.item-sel-box {
		    display: flex;
		    width: 100%;
		    justify-content: space-between;
		    align-items: center;
		    padding-top: 40rpx;
		    padding-bottom: 20rpx;
	}
	.item-equip {
		margin: 30rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		min-width: 160rpx;
		height: 60rpx;
		background-color: lavender;
		text-align: center;
		line-height: 60rpx;
	}
	.activeClass {
		background-color: #118ee9;
		color: white;
	}
</style>